<template>
  <el-container>
    <el-header style="height:180px">
      <img
        src="@/assets/css/images/ownFile.svg"
        alt=""
        style="width: 45px; height: 45px; vertical-align: middle"
      />
      <b> 个人文件</b>
      <br /><br />
      <el-card style="margin-left:-20px;height:80px;border-radius:10px">
        <el-button type="primary" @click="upload" plain style="margin-left: 3%">
          <i class="el-icon-upload"></i> 上 传
        </el-button>
        <el-button
          type="danger"
          style="display: none/block"
          id="dbtn"
          plain
          class="batchDelete"
          @click="batchDelete()"
          >批量删除</el-button
        >
        <el-input
          class="filterInput"
          placeholder="输入关键字进行过滤"
          v-model="filterText"
        >
        </el-input>
        <div style="float:right;width:25%">
          <small
            >{{ storageForm.usedStorage }}MB/{{ storageForm.storage }}G</small
          >
          <br />
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="storageForm.percentage"
          ></el-progress>
        </div>
      </el-card>
    </el-header>
    <el-container>
      <el-aside width="300px" class="fileAside">
        <div class="block" v-contextmenu:contextmenu>
          <br />
          <el-tree
            :data="setTree"
            :props="defaultProps"
            node-key="id"
            ref="SlotMenuList"
            draggable="true"
            @node-click="handleNodeClick"
            :highlight-current="true"
            :current-node-key="currentNodeKey"
            :filter-node-method="filterNode"
            @node-contextmenu="rightClick"
            accordion
          >
            <span
              class="slot-t-node"
              slot-scope="{ node, data }"
              style="margin-left:10px"
            >
              <span v-show="!node.edit">
                <span v-show="data.children && data.children.length >= 1">
                  <i
                    :class="{
                      'iconfont icon-wenjianjiaguanbi': !node.expanded,
                      'iconfont icon-wenjianjiadakai': node.expanded,
                    }"
                    style="color:#2468a2"
                  />
                  <span
                    style="margin-left:5px"
                    @click="log(node.label)"
                    :class="[
                      data.id >= maxexpandId ? 'slot-t-node--label' : '',
                    ]"
                    >{{ node.label }}</span
                  >
                </span>
                <span
                  v-show="!data.children || data.children.length == 0"
                  style="margin-left:5px"
                >
                  <i class="" style="margin-right:10px"></i>
                  <span
                    :class="[
                      data.id >= maxexpandId ? 'slot-t-node--label' : '',
                    ]"
                  >
                    <i
                      style="color:#009ad6"
                      class="iconfont icon-wenjianjiaguanbi"
                    >
                    </i>
                    <span style="margin-left:5px" @click="getFile(data)">{{
                      node.label
                    }}</span></span
                  >
                  <br />
                </span>
              </span>
              <!-- 编辑输入框 -->
              <span v-show="node.edit">
                <el-input
                  class="slot-t-input"
                  size="small"
                  autofocus
                  v-model="data.name"
                  :ref="'slotTreeInput' + data.id"
                  @blur.stop="NodeBlur(node, data)"
                  @keyup.enter.native="NodeBlur(node, data)"
                ></el-input>
              </span>
            </span>
          </el-tree>
          <!--鼠标右键点击出现页面-->
          <div v-show="menuVisible" class="rightdiv">
            <el-menu
              id="rightClickMenu"
              class="el-menu-vertical"
              @select="handleRightSelect"
              active-text-color="#skyblue"
              text-color="black"
              background-color="#fff"
              style="width:120px"
            >
              <el-menu-item index="1" class="menuItem">
                <span slot="title">
                  <i class="el-icon-circle-plus-outline"></i>添加目录</span
                >
              </el-menu-item>
              <el-menu-item index="2" class="menuItem">
                <span slot="title"> <i class="el-icon-edit"></i>修改目录</span>
              </el-menu-item>
              <el-menu-item index="3" class="menuItem">
                <span slot="title">
                  <i class="el-icon-delete"></i>删除目录</span
                >
              </el-menu-item>
              <el-menu-item index="4" class="menuItem">
                <span slot="title"> <i class="el-icon-share"></i> 分享</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-aside>
      <el-main style="margin-top: -15px;">
        <el-card class="mainCard">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>
              <b>{{ PNode }}</b>
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <b>{{ node }}</b>
            </el-breadcrumb-item>
          </el-breadcrumb>
          <el-table
            :data="tableData"
            :stripe="true"
            class="el-table"
            @selection-change="handleSelectionChange"
            :header-cell-style="{ background: '#FAFAFA' }"
          >
            <el-table-column type="selection" width="25"> </el-table-column>
            <!-- <el-table-column prop="oldname" label="文件名"> </el-table-column> -->
            <el-table-column prop="oldname" label="文件名" sortable width="400">
              <template slot-scope="scope" class="rowText">
                <div class="icon">
                  <svg class="icons" aria-hidden="true">
                    <use v-bind:xlink:href="scope.row.icon"></use>
                  </svg>
                </div>
                <div class="text">
                  <b
                    class="rowname"
                    @click="preview(scope.row)"
                    style="margin-left:5px;cursor:pointer"
                  >
                    {{ scope.row.oldname }}</b
                  >
                </div>
              </template>
            </el-table-column>
            <!-- 操作按钮 -->
            <el-table-column width="200">
              <template slot-scope="scope">
                <div class="operation_show">
                  <el-button
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)"
                    icon="el-icon-edit"
                    size="small"
                    circle
                    plain
                  ></el-button>
                  <el-button
                    type="danger"
                    plain
                    size="small"
                    icon="el-icon-delete"
                    @click.native.prevent="deleteRow(scope.$index, scope.row)"
                    circle
                  ></el-button>
                  <el-button
                    type="success"
                    plain
                    size="small"
                    icon="el-icon-share"
                    circle
                    @click="getShareLink(scope.$index, scope.row)"
                  ></el-button>
                  <el-button
                    type="warning"
                    plain
                    size="small"
                    icon="el-icon-download"
                    @click="download(scope.row)"
                    circle
                  ></el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="size" label="文件大小" > </el-table-column>
            <el-table-column prop="type" label="文件类型" ></el-table-column>
            <el-table-column prop="owner" label="创建人" > </el-table-column>
            <el-table-column prop="uploadtime" label="上传日期" >
            </el-table-column>
          </el-table>
          <el-row>
            <el-col :md="3" :lg="6" :xl="7">
              <el-input type="hidden"></el-input>
            </el-col>
            <el-col :md="18" :lg="12" :xl="10">
              <div class="block">
                <!--<span class="demonstration">完整功能</span>-->
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  style="margin-top:10%"
                >
                </el-pagination>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <!-- 编辑 -->
        <el-dialog
          title="文件重命名"
          :visible.sync="editFormVisible"
          :close-on-click-modal="false"
          class="edit-form"
          center
        >
          <el-form :model="editForm" label-width="80px" ref="editForm">
            <el-form-item label="名称" prop="oldname">
              <el-input
                v-model="editForm.oldname"
                auto-complete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="id" prop="id">
              <el-input
                v-model="editForm.id"
                auto-complete="off"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false"
              >取 消
            </el-button>
            <el-button type="primary" @click.native="handleUpdate('editForm')"
              >确 定
            </el-button>
          </div>
        </el-dialog>
        <!-- 外链设置 -->
        <el-dialog
          title="文件分享"
          :visible.sync="dialogShareFormVisible"
          center
        >
          <el-form :model="form" ref="form">
            <el-form-item
              label="链接有效期至："
              :rules="{
                required: true,
              }"
            >
              <el-col :span="11" class="timeCol">
                <el-date-picker
                  v-model="shareDate"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="是否设置提取码：">
              <el-radio v-model="radio" label="1">是</el-radio>
              <el-radio v-model="radio" label="2">否</el-radio>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="createShareLink" round plain
              >生成链接</el-button
            >
          </div>
          <div slot="footer">
            <small>tips: 若分享的文件是视频或音频,有效期仅为一小时</small>
          </div>
        </el-dialog>
        <!-- 外链生成 -->
        <el-dialog
          title="分享链接"
          :visible.sync="shareLinkDialog"
          center
          :close-on-click-modal="false"
          @opened="ShowQRCode()"
          ><img
            src="@/assets/css/images/fileShare.svg"
            @click="goShare"
            class="shareButton"
            alt=""
          />
          <el-form :model="shareForm" ref="form">
            <el-form-item label="分享链接：" :label-width="formLabelWidth">
              <el-input v-model="confirmForm.url"> </el-input>
            </el-form-item>
            <el-form-item
              label="提取码："
              :rules="[{ type: 'number', message: '提取码必须为数字值' }]"
            >
              <el-input type="textarea" v-model="code"></el-input>
            </el-form-item>
            <el-form-item label="外链二维码:"> </el-form-item>
          </el-form>
          <div id="qrcode" style="margin-left:42%"></div>
          <!-- tips -->
          <div slot="footer">
            <small>tips: 有效期至截止日期当天23:59:59</small>
          </div>
        </el-dialog>
        <el-dialog :visible.sync="videoDialog" style="">
          <video
            :src="videoSrc"
            controls="controls"
            width="100%"
            height="100%"
            style="border-radius:10px"
          ></video>
        </el-dialog>
        <!-- 拖拽上传 -->
        <el-dialog
          :visible.sync="uploadDlg"
          width="40%"
          style="text-align: center"
        >
          <el-upload
            class="upload"
            drag
            action="http://192.168.43.79:8080/userFile/upload"
            multiple
            :on-success="handleSuccess"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </el-dialog>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import ElCol from "element-ui/packages/col/src/col";
import api from "./api";
import QRCode from "qrcodejs2";
import axios from "axios";
import ownfile from "./ownFile.vue";
export default {
  components: {
    ownfile,
    ElCol,
  },
  data() {
    return {
      DATA: null,
      NODE: null,
      // 文件是否设置提取码
      radio: "2",
      dialogNewFormVisible: false,
      dialogFormVisible: false,
      dialogClassifyVisible: false,
      tableData: [
        {
          id: "1",
          uploadtime: "2022-05-02",
          oldname: "Resource_Systems.pdf",
          type: "pdf",
          owner: "admin",
          size: "2568KB",
          icon: "#icon-pdf",
        },
        {
          id: "2",
          uploadtime: "2022-03-04",
          oldname: "毕业设计开题报告.doc",
          type: "doc",
          owner: "admin",
          size: "168KB",
          icon: "#icon-WORD",
        },
        {
          id: "3",
          uploadtime: "2022-03-01",
          oldname: "系统流程图.vsd",
          type: "vsd",
          owner: "admin",
          size: "68KB",
          icon: "#icon-vsd",
        },
        {
          id: "4",
          uploadtime: "2022-04-03",
          oldname: "compressed_tracemonkey.ppt",
          type: "ppt",
          owner: "admin",
          size: "1648KB",
          icon: "#icon-ppt",
        },
        {
          id: "5",
          uploadtime: "2022-03-13",
          oldname: "2022毕业设计相关文档模板.zip",
          type: "zip",
          owner: "admin",
          size: "708KB",
          icon: "#icon-yasuobao",
        },
        {
          id: "6",
          uploadtime: "2022-04-01",
          oldname: "movie.mp4",
          type: "mp4",
          owner: "admin",
          size: "168KB",
          src: "https://www.runoob.com/try/demo_source/movie.mp4",
          icon: "#icon-shipin",
        },
        {
          id: "7",
          uploadtime: "2022-04-01",
          oldname: "说明文档.md",
          type: "md",
          owner: "admin",
          size: "168KB",
          src: "https://www.runoob.com/try/demo_source/movie.mp4",
          icon: "#icon-md",
        },
        {
          id: "8",
          uploadtime: "2022-04-01",
          oldname: "毕业生人员表.xlsx",
          type: "xlsx",
          owner: "admin",
          size: "168KB",
          src: "https://www.runoob.com/try/demo_source/movie.mp4",
          icon: "#icon-excel-ext",
        },
        {
          id: "9",
          uploadtime: "2022-04-01",
          oldname: "system.exe",
          type: "exe",
          owner: "admin",
          size: "168KB",
          icon: "#icon-exe",
        },
      ],
      //时间选择器配置
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
        shortcuts: [
          {
            text: "当天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "1天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "7天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
          {
            text: "14天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 14);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      // 批量删除选中项
      multipleSelection: [],
      maxexpandId: 95, //新增节点开始id
      non_maxexpandId: 95, //新增节点开始id(不更改)
      isLoadingTree: true, //是否加载节点树
      setTree: api.treelist, //节点树数据
      upload_directory: "", //上传的目录
      defaultProps: {
        children: "children",
        label: "name",
      },
      filterText: "",
      input: "",
      // form: {
      //   name: "",
      //   code: "",
      // },
      //提取码
      code: "",
      editForm: {
        id: "",
        oldname: "",
        index: 0,
      },
      //有效期
      shareDate: "",
      editFormVisible: false,
      //生成分享链接
      dialogShareFormVisible: false,
      panelShow: false,
      uploadDlg: false,
      //分享对话框
      shareLinkDialog: false,
      currentPage4: 1,
      editObj: {},
      menuVisible: false,
      objectID: null,
      /*分类修改*/
      menuVisible2: false,
      //当前父级目录
      PNode: "",
      // 当前子目录
      node: "",
      //当前文件夹文件个数
      total: 0,
      form: {
        uno: "1",
      },
      nodeForm: {
        id: "",
        uno: "",
      },
      // 文件分享链接
      shareURL: "",
      // 二维码链接
      text: "",
      confirmForm: {
        id:"",
        shareDate: "",
        code: "",
        url: "",
      },
      // 存储
      storageForm: {
        // 已使用存储空间
        usedStorage: 188067.84,
        // 总存储空间
        storage: 1073741824,
        percentage: 17.9,
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.SlotMenuList.filter(val);
    },
  },
  mounted() {
    this.form.uno = parseInt(localStorage.getItem("rid")) + 1;
    this.nodeForm.uno = this.form.uno;
    this.getTreeList();
    this.storage();
  },
  methods: {
    log(node) {
      // console.log(node);
      this.PNode = node;
    },
    storage() {
      this.$http
        .post(`${this.systemURL}/root/userSpace`, this.form)
        .then((res) => {
          // console.log("存储信息：", res);
          this.storageForm = res.data;
        });
      // this.storageForm.usedStorage = this.storageForm.usedStorage / 1024;
      // this.storageForm.storage = this.storageForm.storage / 1073741824;
      // this.storageForm.percentage = this.storageForm.usedStorage / (this.storageForm.storage *1024);
    },
    //获取文件夹树形控件
    getTreeList() {
      // console.log("树形目录--rid：",this.form);
      this.$http
        .post(`${this.systemURL}/fileTree/query`, this.form)
        .then((res) => {
          this.setTree = res.data.data;
          // console.log(res.data.data);
        });
    },
    //获取文件夹下的文件
    getFile(node) {
      this.node = node.name;
      console.log("nodeID:", node);
      // console.log("请求值：",this.nodeForm);
      // if(node.name = "新目录"){
      //     this.nodeForm.id = localStorage.getItem("fileId")
      // }else{
      this.nodeForm.id = node.id;
      // }
      console.log(this.nodeForm);
      this.$http
        .post(`${this.systemURL}/userFile/list`, this.nodeForm)
        .then((res) => {
          // console.log(res.data.data.length);
          this.total = res.data.data.length;
          this.tableData = res.data.data;
        });
    },
    // 文件上传
    upload() {
      this.uploadDlg = true;
      // console.log("上传文件：",this.nodeForm);
      this.$http
        .post(`${this.systemURL}/userFile/getPid`, this.nodeForm)
        .then((res) => {
          console.log(res.data);
        });
    },
    //TODO 文件上传返回
    handleSuccess(res) {
      console.log("上传成功：", res);
      if (res == true) {
        this.storage();
      }
    },
    // 批量删除按钮控制
    handleSelectionChange(val) {
      var deletebtn = document.getElementById("dbtn");
      deletebtn.style.opacity = 1;
      this.multipleSelection = val;
    },
    // 目录过滤
    filterNode(value, data) {
      // console.log("value:", value);
      // console.log("data:", data);
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 右键菜单选择项
    handleRightSelect(key) {
      console.log(key);
      if (key == 1) {
        this.NodeAdd(this.NODE, this.DATA);
        // this.menuVisible = false;
      } else if (key == 2) {
        this.NodeEdit(this.NODE, this.DATA);
        // this.menuVisible = false;
      } else if (key == 3) {
        this.NodeDel(this.NODE, this.DATA);
      } else if (key == 4) {
        this.NodeShare(this.NODE, this.DATA);
      } else if (key == 5) {
        this.menuVisible = false;
      }
      this.menuVisible = false;
    },
    NodeBlur(n, d) {
      //输入框失焦
      console.log(n, d);
      if (n.edit) {
        this.$set(n, "edit", false);
      }
      this.$nextTick(() => {
        this.$refs["slotTreeInput" + d.id].$refs.input.focus();
      });
      console.log("xiugai:", this.DATA);
      this.$http
        .post(`${this.systemURL}/fileTree/update`, this.DATA)
        .then((res) => {
          if (res.status != 200) {
            this.$message.error("操作失败！");
          }
        });
    },
    NodeEdit(n, d) {
      //编辑节点
      console.log(n, d);
      if (!n.edit) {
        //检测edit是否存在or是否为false
        this.$set(n, "edit", true);
      }
      console.log("修改目录：", this.DATA);
    },
    NodeDel(n, d) {
      //删除节点
      console.log(n, d);
      let that = this;
      if (d.children && d.children.length !== 0) {
        this.$message.error("此节点有子级，不可删除！");
        return false;
      } else {
        //新增节点可直接删除，已存在的节点要二次确认
        //删除操作
        let DelFun = () => {
          let _list = n.parent.data.children || n.parent.data; //节点同级数据
          let _index = _list.map((c) => c.id).indexOf(d.id);
          // console.log("删除：",d);
          _list.splice(_index, 1);
          this.$message.success("删除成功！");
          this.$http.post(`${this.systemURL}/fileTree/delete`, d);
        };
        //二次确认
        let ConfirmFun = () => {
          this.$confirm("是否删除此目录？", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              DelFun();
            })
            .catch(() => {});
        };
        //判断是否是新增节点
        d.id > this.non_maxexpandId ? DelFun() : ConfirmFun();
      }
    },
    NodeAdd(n, d) {
      //新增节点
      console.log(n, d);
      //判断层级
      if (n.level >= 3) {
        this.$message.error("最多只支持三级！");
        return false;
      }
      //新增数据
      d.children.push({
        id: ++this.maxexpandId,
        name: "新目录",
        pid: d.id,
        children: [],
      });
      console.log("新增结点：", d.children.slice(-1)[0]);
      //同时展开节点
      if (!n.expanded) {
        n.expanded = true;
      }
      this.$http
        .post(`${this.systemURL}/fileTree/add`, d.children.slice(-1)[0])
        .then((res) => {
          console.log("添加返回：", res);
          localStorage.setItem("fileId", res.data.data.id);
          d.children.slice(-1)[0].id = res.data.data.id;
          // console.log("qingqiu:",this.nodeForm);
        });
    },
    // 文件夹分享
    NodeShare(n, d) {
      console.log("n:", n, "d:", d);
      // this.$http.post("http://192.168.43.79:8080/userFile/").then((res) => {
      //   let fileList = res.data.data;
      //   window.sessionStorage.setItem("fileList",fileList)
      //   this.$router.replace('/sharePage')
      //   // this.$router.push({ name: "sharePage", param: { fileList: fileList } });
      // });
    },
    // 右键菜单
    rightClick(event, object, value, element) {
      if (this.objectID !== object.id) {
        this.objectID = object.id;
        this.menuVisible = true;
        this.DATA = object;
        this.NODE = value;
      } else {
        this.menuVisible = !this.menuVisible;
      }
      document.addEventListener("click", (e) => {
        this.menuVisible = false;
      });
      let menu = document.querySelector("#rightClickMenu");
      /* 菜单定位基于鼠标点击位置 */
      menu.style.left = event.clientX + 20 + "px";
      menu.style.top = event.clientY - 30 + "px";
      menu.style.position = "absolute"; // 为新创建的DIV指定绝对定位
      menu.style.width = 160 + "px";
    },
    // 文件外链设置
    createShareLink() {
      if (this.shareDate != "") {
        this.dialogShareFormVisible = false;
        setTimeout(() => {
          this.shareLinkDialog = true;
          this.$message.success("链接生成成功,有效期至" + this.shareDate);
        }, 500);
      } else {
        this.$message.error("请设置外链有效期！");
      }
      //随机生成提取码
      if (this.radio == 1) {
        var code = "";
        for (var i = 0; i < 6; i++) {
          var radom = Math.floor(Math.random() * 10);
          code += radom;
        }
        this.code = code;
      } else {
        this.code = "";
      }
      // console.log(this.confirmForm);
      // TODO
      this.confirmForm.shareDate = this.shareDate;
      this.confirmForm.code = code;
      console.log("conform：", this.confirmForm);
      this.$http.post(`${this.systemURL}/userFile/shareLink`, this.confirmForm);
      localStorage.setItem("code", this.code);
      localStorage.setItem("time", this.shareDate.getTime());
      this.confirmForm.url =
        "http://localhost:8080/#/sharePage?id=" + this.shareURL;
    },
    // 文件外链
    getShareLink: function(index, row) {
      this.dialogShareFormVisible = true; //dialog对话窗口打开
      // var url = Object.assign({}, row);
      console.log("fenxiang:", row);
      this.confirmForm.id = row.id;
      // 传文件id获取文件URL
      this.shareURL = row.id;
      localStorage.setItem("url", row.url);
    },
    // 加载二维码
    ShowQRCode() {
      document.getElementById("qrcode").innerHTML = "";
      // this.qrcode = this.$QRCode();
      let qrcode = new QRCode("qrcode", {
        width: 132,
        height: 132,
        text: this.shareURL, // 二维码地址
      });
    },
    // 文件提取
    goShare() {
      var { href } = this.$router.resolve({
        name: "sharePage",
      });
      console.log(this.confirmForm.url);
      localStorage.setItem("url", this.confirmForm.url);
      localStorage.setItem("code", this.code);
      localStorage.setItem("time", this.shareDate.getTime());
      window.open(href);
    },
    // 文件删除
    deleteRow(index, rows) {
      this.$http.post(`${this.systemURL}/userFile/fileReturn`, rows);
      // console.log("删除：",rows);
      this.tableData.splice(index, 1);
      this.total--;
      this.$message({
        type: "success",
        message: "删除成功，可在回收站查看!",
      });
    },
    // deleteRow(index, rows) {
    //   rows.splice(index, 1);
    // },
    // 文件重命名
    handleUpdate(formName) {
      console.log(this.editForm.id, this.editForm.oldname);
      this.$http
        .post(`${this.systemURL}/userFile/updateFileName`, this.editForm)
        .then((res) => {
          this.$message.success("重命名成功！");
          this.editFormVisible = false;
        });
      this.getFile();
    },
    // 文件批量删除
    batchDelete() {
      // for (let i = 0; i < this.tableData.length; i++) {
      //   const element = this.tableData[i];
      //   element.id = i;
      // }
      if (this.multipleSelection.length == 0)
        this.$message.error("请先至少选择一项");
      else {
        this.$confirm("此操作会删除这些文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.multipleSelection.forEach((element) => {
              this.tableData.forEach((e, i) => {
                if (element.id == e.id) {
                  this.tableData.splice(i, 1);
                }
              });
            });
            console.log(this.multipleSelection);
            const res = this.$http.post(
              `${this.systemURL}/userFile/deleteFileList`,
              this.multipleSelection
            );
            this.$message.success("操作成功！");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      }
    },
    // 文件重命名
    handleEdit: function(index, row) {
      console.log(row);
      this.editFormVisible = true; //dialog对话窗口打开
      this.editForm = Object.assign({}, row); //将数据传入dialog页面
      this.editForm.index = index; //传递当前index
    },
    // 文件下载
    download(item) {
      // console.log(item);
      axios({
        method: "post",
        url: `${this.systemURL}/userFile/download`,
        data: {
          id: item.id,
        },
        responseType: "blob",
      }).then((res) => {
        console.log(res);
        let blob = new Blob([res.data]);
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob); //创建下载的链接
        console.log(href);
        downloadElement.href = href;
        downloadElement.download = item.oldname; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    preview(row) {
      console.log(row.url);
      // window.open("http://192.168.43.56:8012/onlinePreview?url=" + row.url);
      window.open(row.url);
    },
  },
};
</script>
<style lang="less" scoped>
.menuItem {
  display: block;
  line-height: 34px;
  text-align: center;
  height: 50px !important;
}
.menuItem:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.el-menu-vertical {
  position: absolute;
  background-color: #fff;
  width: 110px !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 5px !important;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  white-space: nowrap;
  z-index: 1000;
}
/deep/.el-menu-item menuitem {
  height: 20px;
}
.rowText {
  display: table-cell;
  text-align: center;
}
.operation_show {
  display: none;
}
.el-table__body tr:hover > td .operation_show {
  display: block;
}

.icons {
  width: 35px;
  height: 32px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon,
.text {
  display: table-cell;
  vertical-align: middle;
  margin-right: 5px;
}
.batchDelete {
  opacity: 0;
}
.batchDelete1 {
  opacity: 1;
}
i {
  margin-left: -10px !important;
}
.el-tree /deep/ .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
//有子节点 且未展开
.el-tree /deep/ .el-icon-caret-right:before {
  // background: url("@/assets/css/images/filelist.svg") no-repeat 0 3px;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
//有子节点 且已展开
.el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  // background: url("@/assets/css/images/filelist.svg") no-repeat 0 3px;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
/*按钮列表*/
/deep/.el-tree-node__expand-icon .el-icon-caret-right {
  display: none !important;
  margin-left: 20px !important;
}
.slot-tree .slot-t-node .slot-t-icons {
  display: none;
  margin-left: 10px;
}
.slot-tree .slot-t-icons .el-button + .el-button {
  margin-left: 6px;
}
.slot-tree .el-tree-node__content:hover .slot-t-icons {
  display: inline-block;
}
.mainCard {
  height: 90vh;
  margin-top: -20px;
  border-radius: 10px !important;
}
.fileAside {
  border-radius: 10px;
  margin-top: -15px;
  background-color: white;
  overflow: hidden;
  height: 90vh;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  padding-right: 8px;
}
.filterInput {
  width: 16.5% !important;
  float: left;
  border-radius: 10px !important;
  margin-bottom: 20px;
}
.shareButton {
  width: 20px;
  height: 30px;
  margin-left: 95%;
  margin-bottom: -20px;
  cursor: pointer;
  z-index: 999;
}
</style>
